<template>
	<div class="iInfo" element-loading-text="加载中" v-loading="loading">
		<div class="flex">
			<div class="lumpBox">
				<div class="Lbox-form">
					<el-form :inline="true">
						<el-form-item label="筛选:">
							<el-select v-model="type" placeholder="项目类型" clearable style="width: 120px;">
								<el-option v-for="item in type_options" :key="item.value" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item><el-input placeholder="请输入关键字" clearable></el-input></el-form-item>
						<el-form-item><el-button icon="el-icon-search" type="primary">查询</el-button></el-form-item>
					</el-form>
				</div>
				<div class="Lbox-title">
					<h2>项目管理</h2>
					<div style="padding:10px 0;"><el-button @click="ShowAdd" icon="el-icon-plus" type="primary">申请立项</el-button></div>
				</div>
				<div class="Lbox-content manageList">
					<el-table :default-expand-all="true" :data="list" border class="el_table" style="width:99%;margin:0 auto;">
						<el-table-column min-width="100" type="expand" label="项目进度">
							<template slot-scope="scope">
								<div class="jindu_step">
									<el-steps :active="scope.row.active || 1" finish-status="success" simple>
										<el-step title="提交立项"></el-step>
										<el-step title="可以申领"></el-step>
										<el-step title="评估中"></el-step>
										<el-step title="评估结果提交"></el-step>
										<el-step title="立项中（任务分解）"></el-step>
										<el-step title="立项/驳回"></el-step>
										<el-step title="研发（硬件）"></el-step>
										<el-step title="研发（软件）"></el-step>
										<el-step title="研发（云平台）"></el-step>
										<el-step title="硬件维护"></el-step>
										<el-step title="样机提交"></el-step>
										<el-step title="整机测试"></el-step>
										<el-step title="完整测试"></el-step>
										<el-step title="申请结项"></el-step>
										<el-step title="结束"></el-step>
									</el-steps>
								</div>
								<el-button class="jindu_btn" @click="ifShowJin(scope.row)" type="primary">进度详情</el-button>
								<div class="jindu" v-if="scope.row.showJin">
									<div class="gunter">
										<el-button @click="scope.row.showJin = false" class="btn" type="primary">返回</el-button>
										<table cellspacing="0" cellpadding="0">
											<thead>
												<tr>
													<td></td>
													<td :colspan="jindu.week_days[0]">第1周</td>
													<td colspan="7" v-for="(week, idx) in new Array(jindu.week_days[2] - 2).fill('').map((i, idx) => idx)" :key="`idx_${idx}`">第{{ idx + 2 }}周</td>
													<td :colspan="jindu.week_days[1]">第{{ jindu.week_days[2] }}周</td>
												</tr>
											</thead>
											<tbody>
												<tr>
													<td>{{ jindu.date_start_m }}月</td>
													<td :style="{ width: `${day == 1 && '5%'}` }" v-for="(day, idx) in jindu.days" :key="`idx_${idx}`">{{ day }}</td>
												</tr>
												<tr v-for="(step, idx) in steps.slice(0, 5)" :key="`idx_${idx}`">
													<td>{{ step }}</td>
													<td
														v-for="(day, index) in jindu.days"
														:key="`idx_step_${index}`"
														:class="{
															active: index + 1 >= jindu.step[`${idx * 2}`] && index + 1 <= jindu.step[`${idx * 2 + 1}`],
															exceed: index + 1 >= jindu.step[`${idx * 2}`] && index + 1 < (jindu.step[`${idx * 2 + 1}`] - jindu.step[`${idx * 2}`]) / 3 + jindu.step[`${idx * 2}`],
															success:
																index + 1 >= (jindu.step[`${idx * 2 + 1}`] - jindu.step[`${idx * 2}`]) / 3 + jindu.step[`${idx * 2}`] &&
																index + 1 < ((jindu.step[`${idx * 2 + 1}`] - jindu.step[`${idx * 2}`]) * 2) / 3 + jindu.step[`${idx * 2}`],
															error:
																index + 1 >= ((jindu.step[`${idx * 2 + 1}`] - jindu.step[`${idx * 2}`]) * 2) / 3 + jindu.step[`${idx * 2}`] &&
																index + 1 <= jindu.step[`${idx * 2 + 1}`]
														}"
														@click="showEdit($event, idx + 1, index)"
													>
														<div v-if="index + 1 == jindu.step[`${idx * 2}`]" class="message">{{ step }}</div>
													</td>
												</tr>
												<tr v-for="(step, idx) in jindu.step6" :key="`idx_step5_${idx}`">
													<td v-if="idx == 0" :rowspan="jindu.step6.length">{{ steps[5] }}</td>
													<td
														v-for="(day, index) in jindu.days"
														:key="`idx_${index}`"
														:class="{
															active: index + 1 >= step['s'] && index + 1 <= step['e'],
															exceed: index + 1 >= step['s'] && index + 1 < (step['e'] - step['s']) / 3 + step['s'],
															success: index + 1 >= (step['e'] - step['s']) / 3 + step['s'] && index + 1 < ((step['e'] - step['s']) * 2) / 3 + step['s'],
															error: index + 1 >= ((step['e'] - step['s']) * 2) / 3 + step['s'] && index + 1 <= step['e']
														}"
														@click="showEdit($event, 5, index)"
													>
														<div v-if="index + 1 == step['s']" class="message">{{ step.name }}</div>
													</td>
												</tr>
												<tr v-for="(step, idx) in steps.slice(6)" :key="`idx_${idx + 5}`">
													<td>{{ step }}</td>
													<td
														v-for="(day, index) in jindu.days"
														:key="`idx_step_${index}`"
														:class="{
															active: index + 1 >= jindu.step[`${(idx + 5) * 2}`] && index + 1 <= jindu.step[`${(idx + 5) * 2 + 1}`],
															exceed:
																index + 1 >= jindu.step[`${(idx + 5) * 2}`] &&
																index + 1 < (jindu.step[`${(idx + 5) * 2 + 1}`] - jindu.step[`${(idx + 5) * 2}`]) / 3 + jindu.step[`${(idx + 5) * 2}`],
															success:
																index + 1 >= (jindu.step[`${(idx + 5) * 2 + 1}`] - jindu.step[`${(idx + 5) * 2}`]) / 3 + jindu.step[`${(idx + 5) * 2}`] &&
																index + 1 < ((jindu.step[`${(idx + 5) * 2 + 1}`] - jindu.step[`${(idx + 5) * 2}`]) * 2) / 3 + jindu.step[`${(idx + 5) * 2}`],
															error:
																index + 1 >= ((jindu.step[`${(idx + 5) * 2 + 1}`] - jindu.step[`${(idx + 5) * 2}`]) * 2) / 3 + jindu.step[`${(idx + 5) * 2}`] &&
																index + 1 <= jindu.step[`${(idx + 5) * 2 + 1}`]
														}"
														@click="showEdit($event, idx + 5, index)"
													>
														<div v-if="index + 1 == jindu.step[`${(idx + 5) * 2}`]" class="message">{{ step }}</div>
													</td>
												</tr>
											</tbody>
										</table>
									</div>
									<div class="comment">
										<div class="com">
											<div class="content" v-for="(comment, idx) in comments" :key="`comment_${idx}`">
												<div class="cont">
													{{ comment.user }} {{ comment.date }}日志
													<br />
													<span>{{ comment.content }}</span>
													<el-button class="remark" plain size="small" type="primary">添加评论</el-button>
												</div>
												<div class="discuss" v-for="(discuss, idx_) in comment.discuss" :key="`comment_${idx_}`">
													{{ discuss.user }} {{ discuss.date }}评论日志
													<br />
													<span>{{ discuss.content }}</span>
												</div>
											</div>
										</div>
										<div class="write">
											<el-input placeholder="请输入评论" clearable></el-input>
											<el-button class="remark" plain size="small" type="primary">评论</el-button>
										</div>
									</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column align="center" label="申请编号" prop="num"></el-table-column>
						<el-table-column align="center" label="项目分类"></el-table-column>
						<el-table-column align="center" label="项目类型" prop="created_at"></el-table-column>
						<el-table-column align="center" label="项目名称" prop="created_at"></el-table-column>
						<el-table-column align="center" label="状态" prop="created_at"></el-table-column>
						<el-table-column align="center" label="负责人" prop="created_at"></el-table-column>
						<el-table-column align="center" label="客户名称" prop="created_at"></el-table-column>
						<el-table-column align="center" label="样机交期" prop="created_at"></el-table-column>
						<el-table-column align="center" label="项目申请人" prop="created_at"></el-table-column>
						<el-table-column align="center" label="申请时间" prop="created_at"></el-table-column>
						<el-table-column align="center" label="备注" prop="created_at"></el-table-column>
						<el-table-column align="center" label="操作" min-width="160">
							<template slot-scope="scope">
								<el-button @click="ShowDetails(2, scope.row)" plain size="small" type="primary">查看详情</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
		</div>
		<div class="popup" v-if="IsShowDetails">
			<div class="popup-box">
				<div class="eTitle">
					<h2>项目立项申请表</h2>
					<i @click="Getcancel" class="el-icon-close"></i>
				</div>
				<div class="popup-main"><addProject @cancel="Getcancel" @confirm="Getconfirm" ref="addProject"></addProject></div>
			</div>
		</div>
	</div>
</template>

<script>
import addProject from './project';
export default {
	name: 'manage1',
	data() {
		return {
			loading: false,
			type: '',
			IsShowDetails: false,
			IsShowAdd: false,
			jindu: {
				start_t: '2021-05-08',
				long: 57,
				weeks: [],
				week_days: [],
				days: []
			},
			steps: ['立项申请', '可以申领', '需求评估', '任务分解', '立项/驳回', '研发中', '硬件维护', '样机提交', '整机测试', '申请结项'],
			type_options: [
				{
					value: '1',
					label: '待申领'
				},
				{
					value: '2',
					label: '评估中'
				},
				{
					value: '3',
					label: '已立项'
				},
				{
					value: '4',
					label: '研发中'
				},
				{
					value: '5',
					label: '已结项'
				},
				{
					value: '6',
					label: '已驳回'
				}
			],
			comments: [
				{
					user: '刘Sir',
					date: '2021-05-23',
					content: 'hahaha',
					discuss: [
						{
							user: '刘工',
							date: '2021-05-23',
							content: '好好好1'
						},
						{
							user: '张工',
							date: '2021-05-24',
							content: '好好好2'
						}
					]
				},
				{
					user: '刘Sir',
					date: '2021-05-24',
					content: 'hahaha',
					discuss: [
						{
							user: '刘工',
							date: '2021-05-23',
							content: '好好好1'
						},
						{
							user: '张工',
							date: '2021-05-24',
							content: '好好好2'
						}
					]
				},
				{
					user: '刘Sir',
					date: '2021-05-24',
					content: 'hahaha',
					discuss: [
						{
							user: '刘工',
							date: '2021-05-23',
							content: '好好好1'
						},
						{
							user: '张工',
							date: '2021-05-24',
							content: '好好好2'
						}
					]
				},
				{
					user: '刘Sir',
					date: '2021-05-24',
					content: 'hahaha',
					discuss: [
						{
							user: '刘工',
							date: '2021-05-23',
							content: '好好好1'
						},
						{
							user: '张工',
							date: '2021-05-24',
							content: '好好好2'
						}
					]
				},
				{
					user: '刘Sir',
					date: '2021-05-24',
					content: 'hahaha',
					discuss: [
						{
							user: '刘工',
							date: '2021-05-23',
							content: '好好好1'
						},
						{
							user: '张工',
							date: '2021-05-24',
							content: '好好好2'
						}
					]
				}
			],
			list: [{ showJin: false }, { showJin: false }, { showJin: false }]
		};
	},
	components: { addProject },
	created() {
		this.$emit('pass', '/manage1');
		// this.GetList(1)
	},
	mounted() {},
	methods: {
		GetList(page) {
			this.loading = true;
			this.page = page;
			let data = {
				page,
				perPage: this.per_page,
				title: this.title
			};
			this.$http.APIASK('/course/getList', 'get', data).then(data => {
				this.loading = false;
				if (data && data.code == 0) {
					this.list = data.data.data;
					this.total = data.data.total;
					this.per_page = Number(data.data.per_page);
				}
			});
		},
		ifShowJin(row) {
			const start_t = '2023-12-28'; // 项目开始时间日期
			const start_time = new Date(start_t);
			const week_day = [1, 7, 6, 5, 4, 3, 2]; // 跟据项目开始时间日期的星期 计算第一周剩余多少天， 如 05-08是星期6，第一周剩2天
			const month_day = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; // 每月有多少天
			let isLeafYear = start_time.getFullYear() % 400 == 0 || (start_time.getFullYear() % 100 != 0 && start_time.getFullYear() % 4 == 0);
			const long = 67; // 项目周期 天
			const day_s = start_time.getDate(); // 项目开始时间 哪天
			let month_s = start_time.getMonth(); // 项目开始时间 哪月
			const week_s = start_time.getDay(); // 项目开始时间是星期几
			const week_len = Math.ceil(long / 7); // 项目耗时几周，向上取整
			const week_day_first = week_day[week_s]; // 项目第一周剩余几天
			const week_day_last = (long - week_day_first) % 7 || 7; // 项目最后周剩余几天
			const month_1st_days = month_day[month_s] - (day_s - 1) + (month_s == 1 ? 1 : 0);
			let days = new Array(month_1st_days).fill('').map((i, idx) => idx + day_s);
			let day_total = month_1st_days;
			while (long > day_total) {
				// 跨年了吗？
				if (month_s > 10) {
					isLeafYear = (start_time.getFullYear() + 1) % 400 == 0 || ((start_time.getFullYear() + 1) % 100 != 0 && (start_time.getFullYear() + 1) % 4 == 0);
					month_s = 0;
				}
				let month_2nd_days = month_s + 1 == 2 && isLeafYear == 1 ? month_day[month_s] + 1 : month_day[month_s]; // 第二个月有多少天
				let new_month = new Array(long - day_total > month_2nd_days ? month_2nd_days : long - day_total).fill('').map((i, idx) => idx + 1);
				day_total += month_2nd_days;
				month_s += 1;
				days = days.concat(new_month);
			}
			this.jindu = {
				days,
				start_t,
				long,
				step: [1, 8, 9, 19, 20, 23, 24, 29, 30, 34, 49, 55, 56, 61, 62, 64, 65, 67],
				step6: [{ name: '硬件', s: 35, e: 48 }, { name: '软件', s: 35, e: 48 }, { name: 'UI', s: 42, e: 48 }, { name: '联调', s: 42, e: 48 }],
				date_start_m: start_time.getMonth() + 1,
				week_days: [week_day_first, week_day_last, week_len]
			};
			row.showJin = true;
		},
		showEdit(e, step, idx) {
			let index = idx;
			let className = e.target.className;
			if (e.target.nodeName == 'DIV') {
				let offsetX = e.offsetX;
				const tdWid = e.currentTarget.clientWidth;
				className = e.currentTarget.className;
				index += Math.floor(offsetX / tdWid);
			}
			if (className.indexOf('active') == -1) {
				return;
			}
			var d = new Date(this.jindu.start_t);
			d.setDate(d.getDate() + index);
			let cur_day = `${d.getMonth() + 1}月 ${d.getDate()}日`;
			console.log(step, index, cur_day);
		},
		Getconfirm() {
			this.Getcancel();
			this.GetList(1);
		},
		Getcancel() {
			this.IsShowDetails = false;
		},
		ShowDetails(data = { id: 1 }) {
			this.$router.push({
				path: '/projectDetail',
				query: {
					id: 1
				}
			});
		},
		ShowAdd() {
			this.IsShowDetails = true;
			this.$nextTick(() => {
				this.$refs.addProject.SubEvents(0);
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.el-table--enable-row-hover .el-table__body tr:hover > td {
	background-color: none;
}
.jindu_step {
	width: 92%;
}
.jindu_btn {
	position: absolute;
	top: 40px;
	right: 20px;
}
.jindu {
	display: flex;
	background-color: #fff;
	z-index: 10;
	position: relative;
	.gunter {
		overflow-x: auto;
		width: 70%;
		> .btn {
			position: absolute;
			right: 30%;
			top: 20px;
			z-index: 20;
		}
		table {
			border-spacing: 0;
			width: 160%;
			table-layout: fixed;
			border-collapse: separate;
			tr td:first-child {
				width: 5%;
			}
			td {
				position: relative;
				border-right: none;

				&.active {
					&.success {
						background-color: aqua !important;
					}
					&.error {
						background-color: red !important;
					}
					&.exceed {
						background-color: orange !important;
					}
					cursor: pointer;
					border-left: none;
					&:first-child {
						border-left: 1px solid #c1c6ca;
					}
				}
				.message {
					position: absolute;
					width: 65px;
					z-index: 10;
					top: 0;
				}
			}
		}
	}
	.comment {
		width: 24%;
		height: 520px;
		margin: 20px auto 0;
		background-color: #f1f1f1;
		padding: 20px;
		position: relative;
		.com {
			height: 90%;
			overflow-y: auto;
		}
		.content {
			margin-top: 20px;
			.cont {
				position: relative;
				span {
					margin-left: 50px;
				}
				.remark {
					position: absolute;
					right: 5px;
					bottom: 5px;
				}
			}
			.discuss {
				width: 80%;
				margin: 0 auto;
				text-align: right;
				border-bottom: 1px solid #999;
				span {
					margin-right: 50px;
				}
			}
		}
		.write {
			position: absolute;
			bottom: 10px;
			width: 100%;
			.el-input {
				width: 70%;
			}
			.remark {
				margin-left: 15px;
			}
		}
	}
}
.popup {
	.popup-box {
		width: 90%;
		.popup-main {
			max-height: 550px;
		}
	}
}
</style>
